import React, { Component } from 'react'

import { Card, notification } from 'antd';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import {login} from '../../api/login'

import './index.css'
export default class Login extends Component {
  onFinish = async (values)=>{
    //const {username,password} = values;
    try{
      const res = await login(values);
      console.log(res);
      if(res.meta.status === 200){
        sessionStorage.setItem('TOKEN',res.data.token)
        notification.success({
          message:res.meta.msg
        });
        this.props.history.push('/admin')
      }else{
        notification.error({
          message:res.meta.msg
        })
      }
    }catch{
      notification.error({
        message:'网络出错！'
      })
    }
    

  }
  render() {
    return (
      <Card title="用户登录" bordered={false} className='login-card'>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    )
  }
}
